<template>
  <FormItem
    :label="label"
    :prop="prop"
    :label-width="labelWidth"
    :rules="rules"
  >
    <DatePicker
      style="width: 100%"
      :type="type"
      v-model="currentValue"
      :placeholder="placeholder ? placeholder : '请选择时间'"
      :size="size"
      :disabled="disabled"
      @on-change="onChange"
      @input="onInput"
      split-panels
    ></DatePicker>
    <slot></slot>
  </FormItem>
</template>

<script>
// 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
import commonItem from './commonItem'
import { formatTime } from './../utils'
import { FormItem, DatePicker } from 'view-design'
export default {
  name: 'DateItem',
  components: { FormItem, DatePicker },
  mixins: [commonItem],
  methods: {
    onChange (d) {
      this.$emit('input', d)
    },
    onInput (d) {
      if (this.type === 'daterange') {
        this.currentValue = d.map(o => formatTime(o, 'YY-MM-DD'))
      }
      if (this.type === 'datetimerange') {
        this.currentValue = d.map(o => formatTime(o, 'YY-MM-DD hh:mm:ss'))
        let endTime = new Date(d[1]).toString()
        if (endTime.includes('00:00:00')) {
          this.currentValue[1] = endTime.replace('00:00:00', '23:59:59')
        }
      }
    }
  }
}
</script>
